<!--
 * @Descripttion: 房源管理
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 13:54:09
-->
<template>
  <div class="lb-app-house-manage">
    <top-nav></top-nav>
    <div class="page-main">
      <el-row class="page-top-operate">
        <div class="flex-between">
          <lb-button
            @click="$router.push(`${appPath}/house/classify`)"
            type="primary"
            icon="el-icon-plus"
          >添加房源</lb-button>
        </div>
      </el-row>
      <el-row class="page-search-form">
        <el-form :inline="true" :model="searchForm" ref="searchForm">
          <el-form-item label="详情页样式" prop="house_type">
            <el-select @change="typeChange" v-model="searchForm.house_type" placeholder="请选择">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类" prop="cate">
            <el-select v-model="searchForm.cate" placeholder="请选择">
              <el-option
                v-for="item in currCateOptions"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房源" prop="keyword">
            <el-input placeholder="请输入房源名称" v-model="searchForm.keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button size="medium" type="primary" icon="el-icon-search" style="margin-right:5px" @click="getTableDataList(1)">{{$t('action.search')}}</lb-button>
            <lb-button size="medium" icon="el-icon-refresh-left" style="margin-right:5px" @click="resetForm('searchForm')">{{$t('action.reset')}}</lb-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="title" label="房源名称"></el-table-column>
        <el-table-column label="房源图片">
          <template slot-scope="scope">
            <lb-image :src="scope.row.imgs[0]"></lb-image>
          </template>
        </el-table-column>
        <el-table-column prop="area_text" label="房源地址"></el-table-column>
        <el-table-column prop="cate_text" label="房源分类"></el-table-column>
        <el-table-column prop="house_type" label="详情页样式">
          <template slot-scope="scope">
            <p>{{typeList[scope.row.house_type].title}}</p>
          </template>
        </el-table-column>
        <el-table-column prop='create_time' label="创建时间">
          <template slot-scope="scope">
            <p>{{scope.row.create_time | handleTime(1)}}</p>
            <p>{{scope.row.create_time | handleTime(2)}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="top" label="房源排序"></el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
              @change="handleUpdateHouse(scope.row.id,scope.row.status)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                type="primary"
                size="mini"
                plain
                @click="$router.push(`${appPath}/house/editHouse?id=${scope.row.id}&type=${scope.row.house_type}`)"
              >{{$t('action.edit')}}</lb-button>
              <!-- <lb-button type='primary' size='mini' plain @click="addEditHouse('edit', scope.row.id)">{{$t('action.edit')}}</lb-button> -->
              <lb-button
                type="danger"
                size="mini"
                plain
                @click="delHouseInfo(scope.row.id)"
              >{{$t('action.delete')}}</lb-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></lb-page>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      appPath: '',
      currCateOptions: [],
      cateOptions: [],
      typeOptions: [
        {
          id: 999,
          name: '全部'
        },
        {
          id: 0,
          name: '二手房样式'
        },
        {
          id: 1,
          name: '简洁样式'
        },
        {
          id: 2,
          name: '新房样式'
        }
      ],
      typeList: [
        {
          title: '二手房样式'
        },
        {
          title: '简洁样式'
        },
        {
          title: '新房样式'
        }
      ],
      showType: false,
      loading: false,
      tableData: [],
      searchForm: {
        house_type: 999,
        cate: 0,
        keyword: '',
        page: 1,
        limit: 10
      },
      total: 0
    }
  },
  created () {
    let {path} = this.$route
    this.appPath = path.includes('app/') ? '/app' : ''
  },
  activated () {
    this.getSelectedOptions()
    this.getHouseSet()
    this.getTableDataList(1)
  },
  methods: {
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    getSelectedOptions () {
      this.$api.getHouseCateList().then(res => {
        if (res.code === 200) {
          this.cateOptions = [{ id: 0, title: '全部' }, ...res.data.cate]
          this.typeChange()
        }
      })
    },
    typeChange () {
      let cateOptions = JSON.parse(JSON.stringify(this.cateOptions))
      let list =
        this.searchForm.house_type === 999
          ? cateOptions
          : [{ id: 0, title: '全部' }]
      if (this.searchForm.house_type !== 999) {
        cateOptions.map(item => {
          if (item.type * 1 === this.searchForm.house_type * 1) {
            list.push(item)
          }
        })
        this.searchForm.cate = 0
      }
      this.currCateOptions = list
    },
    getHouseSet () {
      this.$api.houseSetting().then(d => {
        this.setForm.house_style = parseInt(d.data.house_style)
      })
    },
    setHouse (status) {
      this.$api.houseSettingUpdate({ status }).then(d => {
        if (d.code === 200) {
          this.$message.success(this.$t('tips.successOper'))
        } else {
          this.getHouseSet()
        }
      })
    },
    getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      this.$api.getHouseList(searchForm).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    addHouse (type) {
      this.showType = false
      let url = `/app/house/editHouse?type=${type}`
      this.$router.push(url)
    },
    handleUpdateHouse (id, status) {
      console.log(id, status)
      this.$api.updateHouseInfo({ id, status }).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successOper'))
        }
      })
    },
    delHouseInfo (id) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.updateHouseInfo({ id, status: -1 }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.searchForm.page =
              this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit)
                ? this.searchForm.page
                : Math.ceil((this.total - 1) / this.searchForm.loadinglimit)
            this.$message.success(this.$t('tips.successDel'))
            this.getTableDataList()
          }
        })
      })
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-house-manage {
  width: 100%;
  .page-main {
    width: 100%;
  }
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.type-box {
  display: flex;
  flex-wrap: wrap;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-item {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  margin: 0px 15px;
  text-align: center;
}
.type-img {
  width: 100px;
  height: 100px;
}
</style>
